<template>
	<z-nav-bar title="球员分析"></z-nav-bar>
	<view class="top-box">
		<view class="box flex_sac">
			<view class="uni-white text-c">
				<view class="z-font-36 text-w">{{ headAnalysis.courseNum }}/{{ headAnalysis.totalCourseNum }}</view>
				<view class="z-font-24 uni-mt-18">课程</view>
			</view>
			<view class="uni-white text-c">
				<view class="z-font-36 text-w">{{ headAnalysis.hourNum }}/{{ headAnalysis.totalHourNum }}</view>
				<view class="z-font-24 uni-mt-18">课时</view>
			</view>
			<view class="uni-white text-c">
				<view class="z-font-36 text-w">{{ headAnalysis.questionNum }}/{{ headAnalysis.totalQuestionNum }}</view>
				<view class="z-font-24 uni-mt-18">问题</view>
			</view>
			<view class="uni-white text-c">
				<view class="z-font-36 text-w">{{ headAnalysis.answerNum }}/{{ headAnalysis.totalAnswerNum }}</view>
				<view class="z-font-24 uni-mt-18">提问</view>
			</view>
		</view>
	</view>
	<!-- <view class="common-box">
		<view class="z-font-32 text-w">目标进度分析</view>
		<l-echart ref="analysisChart" @finished="analysisInit"></l-echart>
	</view> -->
	<view class="common-box">
		<view class="z-font-32 text-w">学员问题与解决方案分布</view>
		<l-echart ref="distributionChart" @finished="distributionInit"></l-echart>
	</view>
	<view class="common-box">
		<view class="z-font-32 text-w">问题解决分析</view>
		<l-echart ref="solveChart" @finished="solveInit"></l-echart>
	</view>
</template>

<script setup>
import { getStudentAnalysisHeader, problemSolution, problemSolvingAnalysis } from "@/api/player"
import * as echarts from 'echarts';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const playerInfo = uni.getStorageSync('player-info')

const headAnalysis = ref({})
getStudentAnalysisHeader(playerInfo.id).then(res => {
	headAnalysis.value = res
})

const analysisChart = ref(''),
	analysisOption = {
		color: ['#FA7753', '#965EDD'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['目标杆', '月平均杆'],
			x: 'center',
			y: 'bottom'
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['1月', '2月', '3月', '4月', '5月', '6月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '目标杆',
				type: 'line',
				data: [120, 189, 203, 134, 90, 230],
				smooth: true
			},
			{
				name: '月平均杆',
				type: 'line',
				data: [220, 182, 191, 234, 290, 330],
				smooth: true
			}
		]
	};

async function analysisInit() {
	const chartTmp = await analysisChart.value.init(echarts);
	chartTmp.setOption(analysisOption);
}

let distributionChartObj = ''
const distributionChart = ref(''),
	distributionOption = {
		color: ['#45B961', '#625BFC'],
		legend: {
			data: ['学员问题', '解决方案'],
			x: 'center',
			y: 'bottom'
		},
		radar: {
			shape: 'circle',
			indicator: [
				{
					name: '开球',
					max: 0
				},
				{
					name: '果岭上',
					max: 0
				},
				{
					name: '攻果岭',
					max: 0
				},
				{
					name: '救球',
					max: 0
				},
				{
					name: '推杆',
					max: 0
				}
			]
		},
		series: [
			{
				name: 'Budget vs spending',
				type: 'radar',
				data: [
					{
						value: [0, 0, 0, 0, 0],
						name: '学员问题',
						areaStyle: {
							color: 'rgba(98, 91, 252, 0.30)'
						}
					},
					{
						value: [0, 0, 0, 0, 0],
						name: '解决方案',
						areaStyle: {
							color: 'rgba(69, 185, 97, 0.30)'
						}
					}
				]
			}
		]
	};
problemSolution(playerInfo.id).then(res => {
	const max = res.a.concat(res.q).reduce((a, b) => Math.max(a, b), -Infinity)
	res.tag.forEach((item, index) => {
		distributionOption.radar.indicator[index] = {
			name: item,
			max
		}
	})
	distributionOption.series[0].data[0].value = res.a
	distributionOption.series[0].data[1].value = res.q
	setTimeout(() => {
		distributionChartObj.setOption(distributionOption)
	}, 200)
})
async function distributionInit() {
	distributionChartObj = await distributionChart.value.init(echarts);
}

let solveChartObj = ''
const solveChart = ref(''),
	solveOption = {
		color: ['#363DB4', '#7FD6FF'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			x: 'center',
			y: 'bottom'
		},
		grid: {
			left: '1%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.1]
		},
		yAxis: {
			type: 'category',
			data: ['暂无数据']
		},
		series: [
			{
				name: '已解决',
				type: 'bar',
				data: [1],
				itemStyle: {
					normal: {
						barBorderRadius: 20
					}
				},
				barWidth: 10
			},
			{
				name: '未解决',
				type: 'bar',
				data: [1],
				itemStyle: {
					normal: {
						barBorderRadius: 10
					}
				},
				barWidth: 10
			}
		]
	};
problemSolvingAnalysis(playerInfo.id).then(res => {
	solveOption.yAxis.data = res.tag
	solveOption.series[0].data = res.y
	solveOption.series[1].data = res.n
	setTimeout(() => {
		solveChartObj.setOption(solveOption);
	}, 200)
})
async function solveInit() {
	solveChartObj = await solveChart.value.init(echarts);
}
</script>

<style lang="scss">
@import 'analysis.scss';
</style>
